import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Modal } from "react-native";
import { DatePickerView } from "@ant-design/react-native";
// import moment from "moment";
import { ColorPrimary } from "../../theme";

const styles = StyleSheet.create({
  header: {
    width: "100%",
    flexDirection: "row",
    paddingTop: 30,
  },
  btn: {
    width: "50%",
    alignItems: "center",
  },
  cancel: {
    color: "rgba(0,0,0,0.35)",
    fontSize: 18,
    fontWeight: "500",
  },
  confirm: {
    color: ColorPrimary,
    fontSize: 18,
    fontWeight: "500",
  },
});

class CustomTimeSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: new Date(),
    };
  }

  onConfirm = () => {
    const { onChange = () => {}, onClose = () => {} } = this.props;
    const { value } = this.state;
    onChange(value);
    onClose();
  };

  render() {
    const { value } = this.state;
    const {
      visible,
      onClose = () => {},
      mode = "date",
      minDate,
      maxDate,
      minuteStep = 1,
    } = this.props;

    return (
      <Modal
        animationType="fade"
        onClose={onClose}
        visible={visible}
        transparent
        onRequestClose={onClose}
      >
        <View
          style={{ flex: 1, width: "100%", backgroundColor: "rgba(0,0,0,.5)" }}
        >
          <View
            style={{
              position: "absolute",
              bottom: 0,
              backgroundColor: "#fff",
            }}
          >
            <View style={styles.header}>
              <TouchableOpacity style={styles.btn} onPress={onClose}>
                <Text style={styles.cancel}>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.btn} onPress={this.onConfirm}>
                <Text style={styles.confirm}>确认</Text>
              </TouchableOpacity>
            </View>
            <DatePickerView
              mode={mode}
              minDate={minDate || null}
              maxDate={maxDate || null}
              value={value}
              minuteStep={minuteStep}
              onChange={v => {
                this.setState({ value: v });
              }}
              onValueChange={this.onValueChange}
            />
          </View>
        </View>
      </Modal>
    );
  }
}

export default CustomTimeSelect;
